masonry page list CSS
code:style.css
/*↓ masonry page list CSS */
/* related-page-list */
.related-page-list {
/*page-sort-menu見切れ防止*/
min-height: 300px !important;
line-height: var(--line-height-title);
width: 100%;
padding-left: 0.5rem;
}
.related-page-list.searching {
min-height: 18em;
}
/* page sort menu がずれないように */
.related-page-list .page-sort-menu {
line-height: 1rem;
font-size: 14px;
/*高さを関連頁検索欄と揃える*/
display: flex;
justify-items: center;
align-items: center;
}
.related-page-list .toolbar {
width: 100%;
flex-wrap: wrap;
height: auto;
padding-bottom: 7px; /*検索欄上下の間隔を揃える*/
}
.related-page-list .page-sort-menu {
min-width: 11em;
justify-content: flex-end;
}
.related-page-list .links-container { flex-direction: row; }
/*.links-container ul.grid > li,
.links-container > .links-2-hop ul.grid > li {*/
.links-container .page-list-item {
max-height: var(--card-max-height);
}
.links-container ul.grid > li:has(strong),
.links-container > .links-2-hop ul.grid > li:has(strong) {
max-height: var(--card-match-max-height);
}
.project-links-1-hop .page-list-item .title,
.links-container > .links-2-hop .page-list-item .title,
.links-container > .links-1-hop .page-list-item .title {
min-width: var(--card-min-width);
max-width: var(--card-max-width);
}
.related-page-list.searching .page-list-item .title {
max-width: unset;
}
.searching .project-links-1-hop .page-list-item
/*,.project-links-1-hop .page-list-item:has(strong) .title*/
,.related-page-list.searching > .links-1-hop .page-list-item
/*,.related-page-list > .links-1-hop .page-list-item:has(strong) .title*/
,.related-page-list.searching > .links-2-hop .page-list-item
/*,.related-page-list > .links-2-hop .page-list-item:has(strong) .title */
{
max-width: var(--card-match-max-width);
}
@media screen and (max-width: 38em) {
.project-links-1-hop .page-list-item:has(strong)
,.related-page-list > .links-1-hop .page-list-item:has(strong)
,.related-page-list > .links-2-hop .page-list-item:has(strong)
{
max-width: unset;
}
}
/*relation label*/
.relation-label {
position: relative;
padding: 0 !important;
height: auto !important;
max-width: calc((var(--card-max-width) + var(--card-min-width)) / 2) !important;
}
ul:has(strong) > .relation-label {
max-width: var(--relation-label-match-max-width) !important;
}
.relation-label a {
padding: 0 !important;
height: auto !important;
/*box-shadow: 1px 1px 2px rgba(66,66,66,0.28);*/
}
.relation-label .title {
/*padding-bottom: var(--card-padding-y) !important;*/
line-height: var(--line-height-title);
}
.links-2-hop .relation-label {
display: flex;
/*高さを行いっぱいに揃える*/
padding-top: -2em !important;
}
.relation-label .kamon {
display: none !important;
}
/* two-hop-links tile view core*/
.related-page-list {
display: inline-flex;
flex-wrap: wrap;
overflow-wrap: break-word;
align-content: flex-start;
}
.related-page-list .links-1-hop .page-list-item, .related-page-list .links-2-hop .page-list-item, .related-page-list .project-links-1-hop .page-list-item {
display: grid;
grid: auto-flow / min-content;
}
.related-page-list.searching .links-1-hop .page-list-item
, .related-page-list.searching .links-2-hop .page-list-item
, .related-page-list.searching .project-links-1-hop .page-list-item {
display: block;
}
.related-page-list .page-list-item, .relation-label {
height: auto !important;
width: auto !important;
margin: 0 !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.related-page-list .page-list-item .title {
word-break: keep-all;
}
.related-page-list ul.grid {
display: flex !important;
flex-wrap: wrap;
gap: unset;
}
.related-page-list .links-1-hop .page-list-item,
.related-page-list .links-2-hop .page-list-item, .related-page-list .project-links-1-hop .page-list-item {
overflow-y: hidden;
}
.related-page-list .links-1-hop .page-list-item::-webkit-scrollbar,
.related-page-list .links-2-hop .page-list-item::-webkit-scrollbar, .related-page-list .project-links-1-hop .page-list-item::-webkit-scrollbar {
display: none;
}
.related-page-list .links-1-hop .page-list-item .title, .related-page-list .links-2-hop .page-list-item .title, .related-page-list .project-links-1-hop .page-list-item .title {
overflow-wrap: break-word;
}
.related-page-list .links-container {
flex-wrap: wrap;
gap: unset;
}
.related-page-list .page-list-item .header {
border-top-width: 0 !important;
}
/*.grid*/
.related-page-list li.ellipsis a, .grid li.expand-stack a {
height: fit-content !important;
}
.related-page-list .arrow, .relation-label .kamon, .kamon-plus {
display: none !important;
}
/* two-hop-links space */
.related-page-list .links-1-hop .page-list-item .header, .related-page-list .links-2-hop .page-list-item .header, .related-page-list .project-links-1-hop .page-list-item .header {
padding: 0px !important;
}
.related-page-list .page-list-item .description {
margin: var(--card-title-description-between) var(--card-padding-x) var(--card-padding-y) var(--card-padding-x);
padding: 0 !important;
min-height: 0 !important;
line-height: var(--line-height-description) !important;
height: content;
}
margin-bottom: var(--card-padding-btm, var(--card-padding-y)); }
.relation-label .title {
max-height: var(--relation-label-max-height) !important;
}
ul:has(strong) > .relation-label .title {
max-height: var(--relation-label-match-max-height) !important;
}
.links-container .page-list-item .content .title {
padding: var(--card-padding-y) var(--card-padding-x) 0 var(--card-padding-x);
}
.related-page-list ul.grid {
margin-inline-end: 0px;
}
.related-page-list ul.grid > li,
.links-container > .links-2-hop ul.grid > li {
margin-right: var(--card-between) !important;
margin-bottom: var(--card-between) !important;
}
.related-page-list .grid li.page-list-item a {
box-shadow: none;
}
.related-page-list .grid li.page-list-item a: hover {
box-shadow: none !important;
}
.related-page-list .page-list-item .line {
line-height: var(--line-height-description) !important;
}
/*
.related-page-list.searching .page-list-item .content > .description {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}*/
.related-page-list.searching .page-list-item .description br {
display: none;
}
.related-page-list.searching .page-list-item .line {
display: block !important;
margin: .4em 0 !important;
}
.related-page-list .page-list-item .title {
line-height: var(--line-height-title) !important;
}
.splitter {
display: none !important;
}
.links-1-hop .grid {
flex-wrap: wrap;
}
.related-page-list .page-list-item .content {
height: 100% !important;
}
.related-page-list .empty .title, .related-page-list .links-1-hop .page-list-item .title, .related-page-list .links-2-hop .page-list-item .title, .related-page-list .project-links-1-hop .page-list-item .title
/*,.page-list .page-list-item .title*/
{
font-weight: normal !important;
}
.related-page-list {
.page-list-item .content .icon {
margin: 0 !important; padding: 0 !important;
max-height: var(--card-max-height);
min-width: var(--icon-picture-min-width);
/*margin-top: var(--card-title-description-between);*/
}
.page-list-item .content .icon,
.page-list-item .content .icon img { border-radius: 0 0 var(--card-padding-x) var(--card-padding-x) !important; }
.page-list-item > a:has(.icon) {
background-color: #0000 !important; border: unset !important;
box-shadow: none;
}
.page-list-item > a:has(.icon) .hover { background-color: #0000 !important; } .links-container .page-list-item:has(.icon) { max-height: unset !important; }
.page-list-item .content:has(.icon) .header {
/*margin: 0 !important;*/
/*padding: var(--card-padding-y) var(--card-padding-x) var(--card-title-description-between) var(--card-padding-y) !important;*/
border-radius: var(--card-padding-x) var(--card-padding-x) 0 0;
}
.page-list-item:not(:hover) .content:has(.icon) .header {
background-color: var(--card-bg, white);
}
.page-list-item .content:has(.icon) .title {
padding-bottom: var(--card-title-description-between);
}
}
/*.empty */
.related-page-list .grid li {
aspect-ratio: unset;
}
.related-page-list .grid .page-list-item.empty {
opacity: 1 !important;
height: min-content !important;
max-width: 100%;
}
.empty a {
height: 100% !important;
}
.related-page-list .empy-links {
max-width: 100%;
}
.related-page-list .empty .header {
padding: 0 !important;
max-width: 100%;
}
.related-page-list .empty .header > .title {
white-space: nowrap;
text-overflow: ellipsis;
}
.relation-label .title, .empty .header > .title {
font-size: 14px !important; /*.empty .title 同一*/
padding: var(--card-padding-y) var(--card-padding-x) !important; /*英字の足の見切れ防止*/
}
.empty .description {
display: none;
}
/* .empty-links を先頭に持ってくる */
.empty-links { order: -1; }
.links-2-hop, .links-1-hop { order: 2;}
.project-links-1-hop { order: 1; }
/*↑ masonry page list CSS */